<template>
  <div class="web-container periodical">
    <div class="content-top"  v-loading="loading">
      <span class="title">期刊推荐</span>
      <div class="list">
        <div class="item" v-for="(item,index) in homeList" :key="index"  @click="goToInfo2(item)">
          <span class="item-cover" :style="{backgroundImage:'url(http://c61.cnki.net/CJFD/big/'+item.cover+'.jpg)'}"></span>
          <div class="item-right">
            <span class="name" v-html="item.source"></span>
            <span class="desc" v-html="'第'+item.externalSourcePeriods+'期'"></span>
          </div>
        </div>
      </div>
    </div>
    <div class="content-bottom">
      <div class="item" v-for="(item,index) in classDetailList" :key="index">
        <span class="title" v-html="item.type_name"></span>
        <div class="bottom-item">
          <div class="item-left" @click="goToInfo(item.bigData[0])">
            <span class="item-cover" :style="{backgroundImage:'url(http://c61.cnki.net/CJFD/big/'+item.bigData[0].max_file_name.slice(0,4)+'.jpg)'}"></span>
            <span class="name" v-html="item.bigData[0].source"></span>
            <span class="desc" v-html="item.bigData[0].max_period"></span>
          </div>
          <div class="item-right">
            <ul>
              <li v-for="(item2,index2) in item.data" :key="index2"  @click="goToInfo(item2)">
                <span v-html="item2.source"></span>
                <span v-html="item2.max_period"></span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {GetPeriodicalList, GetPeriodicalDetialsList, GetHomeList} from "../../api/Api";
export default {
  data() {
    return {
      classList:[],
      classDetailList:[],
      pageSize:8,
      currentPage:Number(this.$route.query.currentPage)||1,
      homeList:[],
      loading:true
    };
  },
  created(){
    GetHomeList()
      .then(result=>{
        this.loading = false
        const list = result.data
        list.map(i=>{
          if(i.columnKindDes == 5){
            this.homeList = i.recommendResList;
          }
        })
        // this.homeList = result.data[1].recommendResList;
      })
    GetPeriodicalList(5)
      .then(result=>{
        return this.classList = result.data
      })
      .then(result=>{
        result.map((value, index) => {
          GetPeriodicalDetialsList(5,'', value.type_name,this.currentPage,this.pageSize)
            .then(result=>{
              this.classDetailList.push(...[{type_name:value.type_name,data:result.data.slice(1),bigData:result.data.slice(0,1)}]);
            })
        })
      })

  },
  components: {},

  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    goToInfo(item) {
      this.$router.push("/periodical/info?max_file_name="+item.max_file_name.slice(0,4)+"&resourceType=5&value="+item.source);
    },
    goToInfo2(item) {
      this.$router.push("/periodical/info?max_file_name="+item.cover+"&resourceType=5&value="+item.source);
    }
  }
};
</script>
<style lang="less" scoped>
.periodical {
  .content-top {
    padding: 0 20px;
    background: #fff;
    border-radius: 10px;
    .title {
      display: block;
      font-size: 26px;
      padding: 20px 0;
      border-bottom: 1px solid #c1c1c1;
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      .item:nth-child(4n + 1) {
        padding-left: 0;
      }
      .item:nth-child(1),
      .item:nth-child(2),
      .item:nth-child(3),
      .item:nth-child(4) {
        border-bottom: 1px solid #ededed;
      }
      .item {
        cursor: pointer;
        display: flex;
        padding: 20px 0;
        padding-left: 70px;
        .item-cover {
          display: block;
          width: 120px;
          height: 160px;
          background: url("/static/images/base/book.png") no-repeat;
          background-size: cover;
          border-radius: 10px;
          box-shadow: 0 2px 10px rgba(0,0,0,0.4);
        }
        .item-right {
          margin-left: 20px;
          width: 97px;
          .name {
            display: block;
            margin-top: 10px;
            font-size: 18px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .desc {
            margin-top: 5px;
            display: block;
            font-size: 14px;
            color: #a1a1a1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
  .content-bottom {
    display: flex;
    flex-wrap: wrap;
    .item {
      cursor: pointer;
      margin-top: 24px;
      border-radius: 10px;
      padding: 0 20px;
      width: 538px;
      height: 487px;
      background: #fff;
      margin-left: 44px;
      .title {
        font-size: 26px;
        display: block;
        padding: 20px 0;
        margin-bottom: 20px;
        border-bottom: 1px solid #c1c1c1;
      }
      .bottom-item {
        display: flex;
        .item-left {
          .item-cover {
            display: block;
            background: url("/static/images/base/book.png") no-repeat;
            background-size: cover;
            width: 214px;
            height: 286px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.4);
          }
          .name {
            margin-top: 10px;
            display: block;
            font-size: 20px;
          }
          .desc {
            margin-top: 5px;
            display: block;
            font-size: 16px;
            color: #a1a1a1;
          }
        }
        .item-right {
          margin-left: 30px;
          width: 100%;
          ul {
            padding-left: 0px;
            width: 100%;
            li {
              padding: 16px 0;
              border-bottom: 1px solid #efefef;
              display: flex;
              justify-content: space-between;
              align-items: center;
              span:first-child {
                font-size: 18px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                width: 230px;
              }
              span:last-child {
                font-size: 16px;
                color: #a1a1a1;
              }
            }
            li:nth-child(1) {
              padding-top: 0px;
            }
            li:last-child {
              border-bottom: none;
            }
          }
        }
      }
    }
    .item:nth-child(2n-1) {
      margin-left: 0px;
    }
  }
}
</style>


